<template>
  <div class="order-create">
    <h1>创建订单</h1>
    <div class="form-container">
      <el-form :model="orderForm" :rules="rules" ref="orderForm" label-width="100px">
        <el-form-item label="工单标题" prop="title">
          <el-input v-model="orderForm.title" />
        </el-form-item>
        <el-form-item label="联系人" prop="name">
          <el-input v-model="orderForm.name" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="orderForm.phone" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="orderForm.address" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="orderForm.des" type="textarea" />
        </el-form-item>
        <el-form-item label="工单类型">
          <el-select v-model="orderForm.type" placeholder="请选择工单类型">
            <el-option label="普通" :value="0"></el-option>
            <el-option label="紧急" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">创建订单</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { addOrderAPI } from '@/apis/order'

export default {
  name: 'OrderCreate',
  data() {
    return {
      orderForm: {
        title: '',
        name: '',
        phone: '',
        address: '',
        des: '',
        type: 1,
        status: 0,
        payStatus: 0
      },
      rules: {
        title: [
          { required: true, message: '请输入工单标题', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.orderForm.validate(async (valid) => {
        if (valid) {
          try {
            const res = await addOrderAPI(this.orderForm)
            if (res.code === 0) {
              this.$message({
                type: 'success',
                message: '创建订单成功!'
              })
              this.resetForm()
            } else {
              this.$message({
                type: 'error',
                message: res.msg || '创建订单失败'
              })
            }
          } catch (error) {
            this.$message({
              type: 'error',
              message: '创建订单失败: ' + (error.msg || error.message || '未知错误')
            })
            console.error('创建订单失败:', error)
          }
        }
      })
    },
    resetForm() {
      this.$refs.orderForm.resetFields()
      this.orderForm.type = 1
      this.orderForm.status = 0
      this.orderForm.payStatus = 0
    }
  }
}
</script>

<style scoped>
.order-create {
  padding: 20px;
}

.form-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>